<!--
 * @Description:
 * @Author: your name
 * @version:
 * @Date: 2024-05-08 16:34:13
 * @LastEditors: 'YSJ' '951866543@qq.com'
 * @LastEditTime: 2024-09-13 17:31:39
-->
<template>
  <div id="cesium-viewer">
    <slot>
      <div id="panel-slot" v-show="!isFullscreen">
        <Panel
          v-for="(title, index) in titles"
          :key="index"
          :title="title"
          class="panel"
          v-if="!menus.isActive"
        />
      </div>
      <toolBar
        @toggleFullscreen="handleFullscreen"
        :isFullscreen="isFullscreen"
      />
    </slot>
  </div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted, markRaw, ref, render } from 'vue'
import menusData from '../store/menuData'
import app from '../main'
import { getLine } from '@/api/line'
import {
  initViewer,
  setScene,
  loadTilesets,
  handleDefaultModelEffect,
  flyToDefaultView,
} from '@/cesiumTools/sceneManager'
import {
  coneWithLight,
  bottomCircle,
  renderStation,
  renderLines,
  renderAll,
} from '../cesiumTools/material/effectController'
import { useLineData } from '@/store/index'
import Panel from '../components/Panel.vue'
import toolBar from '../components/toolBar.vue'
const lineDataStore = useLineData()
const menus = ref(menusData[4])
const titles = [
  '运营统计',
  '地铁活动',
  '客流指标',
  '线路概览',
  '告警趋势',
  '实时影像',
]
//初始化cesium实例
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODAzN2EzOS1kZDMzLTQ5Y2UtYjYxMi1jMzQxNTdiMTUzN2IiLCJpZCI6NDU5NDIsImlhdCI6MTYxNTYyNDQyOX0.BucgmI6OJ-7ixj7rcQ_Qyg45DkvdHmaLrFwyMYitLcI'

onMounted(async () => {
  const viewer = initViewer('cesium-viewer')
  //把slot里的内容放入cesiumWidget
  const slot = document.getElementById('panel-slot')
  viewer.cesiumWidget.container.appendChild(slot)
  setScene(viewer)
  flyToDefaultView(viewer)
  const modelUrls = [
    {
      url: 'http://localhost:8888/wuhan/tileset.json',
      options: {},
    },
  ]
  lineDataStore.setViewer(markRaw(viewer))
  // 加载线路数据
  const lineData = await getLine()
  lineDataStore.setData(markRaw(lineData))
  // lineData.forEach((item) => {
  //     const positions = []
  //     item.paths.forEach((path) => {
  //         positions.push(path.lng, path.lat)
  //     })
  //     console.log(positions);
  //     const renderLinesOpt={
  //         positions: positions,
  //     }
  //     // const lines=[]
  //     renderLines(viewer,renderLinesOpt)
  //     item.stationsList.forEach((station) => {
  //         const lng=station.position.lng
  //         const lat=station.position.lat
  //         const positions = Cesium.Cartesian3.fromDegrees(lng, lat);
  //         const coneWithLightOpt={
  //               position: positions,
  //         }
  //         coneWithLight(viewer,coneWithLightOpt)
  //     })

  // })

  // bottomCircle(viewer)
  // const stations=[]
  // renderStation(viewer)
  // const lines=[]
  // renderLines(viewer)

  // 加载多个3dtiles
  await loadTilesets(viewer, modelUrls, (tilesets) => {
    handleDefaultModelEffect(tilesets[0])
  })
})
</script>
<style>
#cesium-viewer {
  width: 100%;
  height: 100%;
  pointer-events: all;
}
</style>
